<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-position="left"
      label-width="100px"
      v-loading="formLoading"
    >
      <div class="module-title">申请选择</div>
      <el-form-item label="" prop="type" label-width="0">
        <el-checkbox v-model="formData.check" disabled>云测申请</el-checkbox>      
      </el-form-item>
      <div class="module-title">基本信息</div>
      <div>
        <el-form-item label="厂商名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
        <el-form-item label="选择模型" prop="请选择">
          <el-select v-model="formData.modelType" placeholder="请选择" class="gw-input-width-214" >
            <el-option
              v-for="dict in modelTypeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="专业" prop="name">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
        <el-form-item label="模型能力" prop="请选择">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="镜像" prop="name">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
        <el-form-item label="模型版本" prop="请选择">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="选择模型" prop="请选择">
          <el-select v-model="formData.modelType" placeholder="请选择" class="gw-input-width-214" >
            <el-option
              v-for="dict in modelTypeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模型说明文件">
          <el-button @click="turnDown" type="danger">查看文件</el-button>
        </el-form-item>
        <el-form-item label="镜像版本" prop="请选择">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
      </div>
      <div class="module-title">资源选择</div>
      <div>
        <el-form-item label="CPU核心" prop="name">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
        <el-form-item label="GPU核心" prop="请选择">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="内存" prop="name">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
        <el-form-item label="显存" prop="请选择">
          <el-input v-model="formData.name" placeholder="请输入任务名称" class="gw-input-width-244" disabled />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="选择评价模版" prop="name">
          <el-select v-model="formData.modelType" placeholder="请选择" class="gw-input-width-214" @change="changeTemplate(index)">
            <el-option
              v-for="dict in modelTypeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-button @click="previewTemplate">预览</el-button>
      </div>
    </el-form>  
    <template #footer>
      <el-button @click="turnDown" type="danger">取消</el-button>
      <el-button @click="nextForm" type="primary" :disabled="formLoading">确定</el-button>
    </template>
  </Dialog>
   <ValidationsetAllocation ref="validationsetRef" @success="dialogVisible = false" />
</template>
<script setup lang="ts">
import { EvaluationTaskApi, EvaluationTaskVO } from '@/api/multiModel/evaluationtask'

/** 评测任务 表单 */
defineOptions({ name: 'ApplyEvaluate' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('申请表格审核') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  check: true,
  modelType: undefined,
  name: '',
  type: undefined,
  datasetTypeIds: [],
  largeModelIds: '',
  status: undefined
})
const formRules = reactive({
  name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '评测类型不能为空', trigger: 'change' }],
  datasetTypeIds: [{ required: true, message: '测试集不能为空', trigger: 'blur' }],
  // largeModelIds: [{ required: true, message: '模型类型不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '推理状态不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  formType.value = type
  formLoading.value = true
  resetForm()
  // 修改时，设置数据
  if (id) {
    formData.value = await EvaluationTaskApi.getEvaluationTask(id)
  }
  formLoading.value = false
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const nextForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    let data = formData.value as unknown as EvaluationTaskVO
    if (formType.value === 'create') {
      await EvaluationTaskApi.createEvaluationTask(data)
      message.success(t('common.createSuccess'))
    } else {
      await EvaluationTaskApi.updateEvaluationTask(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
// 预览
const previewTemplate = () => {}
const changeTemplate = () => {}

const validationsetRef = ref()
// 驳回
const turnDownRef = ref()
const turnDown = () => {
  turnDownRef.value.open()
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    check: true,
    modelType: undefined,
    name: '',
    type: undefined,
    datasetTypeIds: [],
    largeModelIds: '',
    status: undefined
  }
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.module-title {
  color: #171717;
  font-size: 16px;
  font-weight: 700;
  height: 24px;
  line-height: 24px;
  margin-left: 16px;
  margin-bottom: 16px;
  position: relative;
  &::before {
    position: absolute;
    z-index: 10;
    display: block;
    width: 4px;
    height: 24px;
    left: -16px;
    background-color: var(--el-color-primary);
    content: '';
  }
}
.radio-font {
  font-weight: 700;
}
.model-add {
  font-weight: 700;
  color: #171717;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.type-tips {
  font-size: 10px;
  color: #979797;
  line-height: 20px;
  // margin-top: -16px;
  margin-bottom: 11px;
}
.model-label {
  width: 100px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  &::before {
    content: "*";
    color: var(--el-color-danger);
    margin-right: 4px;
  }
}
.error-tips {
  color: var(--el-color-danger);
}
</style>